import React from 'react'
import { Card, Button, Table, notification } from 'antd';
import { getMeetingMember, removeMeetingMember } from '../api/meeting';

export default class MeetingMember extends React.Component {
  state = {
    members: [],
    loading: false,
  }

  render() {
    const columns = [{
      title: '成员编号',
      dataIndex: 'id',
      key: 'id',
    }, {
      title: '成员姓名',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: this.props.isClose ? '签到时间' : '操作',
      dataIndex: 'signtime',
      key: 'signtime',
      render: (signtime, value) => {
        if(this.props.isClose) {
          return (<span>{signtime === 0 ? '未签到' :
            new Date(signtime).toLocaleString()}</span>)
        } else {
          return (<Button onClick={() => {
            this.removeMember(value.id)
          }}>移除</Button>)
        }
      }
    }]

    return (
      <Card title="会议成员管理" style={{
          margin: 'auto',
          marginTop: '20px',
          width: '60%',
        }}
        extra={<Button onClick={this.props.back}>返回会议列表</Button>}
      >
        <Table
          loading={this.state.loading}
          columns={columns} 
          dataSource={this.state.members}
          rowKey={record => record.id}
        />
      </Card>
    )
  }

  componentDidMount = () => {
    this.setState({
      loading: true,
    })
    getMeetingMember(this.props.meeting.id, this.props.meeting.originator).then(res => {
      this.setState({
        members: res.data.data,
        loading: false,
      })
    })
  }

  removeMember = (joiner) => {
    removeMeetingMember(this.props.meeting.id, joiner).then(res => {
      const { data } = res
      if (data.code === 0) {
        notification.success({
          message: data.data
        })
        this.setState({
          members: this.state.members.filter(m => m.id !== joiner)
        })
      } else if (data.code === 1) {
        notification.error({
          message: data.msg
        })
      }
    })
  }
}
